

<template>
    <view
        style="
            background: #fff;
            width: 750rpx;
            position: fixed;
            z-index: 100;
        "
        :style="{ height: systemInfo.statusBarHeight + 'px' }"
    ></view>

    <view v-if="shadowVisible"  @touchstart="close" class="win_shadow"></view>
    <!-- transform: `translateY(-${transFormHeight}px)`, -->
    <view class="trendDetail" @tap="close" :style="{
        transform: `translateY(-${upHeight}px)`,
    }">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            class="slim_header d-flex a-center"
            style="
                border-bottom: none;
                height: 150rpx;
                padding-left: 100rpx;
                z-index: 30;
            "
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="user_msg d-flex a-center" @tap.stop="goUserDetail(trendDetail.userId)">
                <userhead
                    width="100"
                    height="100"
                    :saveKey="trendDetail.userId"
                    :isVip="trendDetail.isVip"
                    :src="trendDetail.photo"
                />
                <view class="d-flex d-c msg" style="margin-left:20rpx;">
                    <view class="u_name2">{{ trendDetail.nickName }}</view>

                    <view class="d-flex d-r a-center">
                         <sexage
                            class="sexdot psr"
                            style="top:4rpx;"
                            :sex="trendDetail.sex"
                            :age="trendDetail.age"
                        />
                         <view class="desp d-flex d-r a-center" style="margin-left:10rpx;">
                                <text class="online" v-if="trendDetail.isOnline">当前在线</text>
                                <view class="d-flex d-r a-center">
                                    <text class="text" :class="{online:calcTimeForShow(trendDetail)==='刚刚在线'}" v-if="!trendDetail.isOnline">
                                        {{ calcTimeForShow(trendDetail)}}
                                    </text>
                        </view>
                    </view>

                    </view>


                </view>
            </view>
            <view class="right_box">
                <!-- <text
                    class="right_box_text"
                    style="color: #1dc691; font-size: 28rpx"
                    @tap="goRelease"
                    >发动态</text
                > -->
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>

        <view
            class="content1"
            :style="{ top: `calc(  170rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <scroll-view
                class="scrollView"
                :scroll-y="true"
                :scroll-top='scrollTop'
                :scroll-with-animation="true"
                ref="scroll"
                @scroll="onScroll"
            >
                <view class="card" id="heightDom">
                    <view class="trend">
                        <view class="title">
                            <text class="text">{{ trendDetail.content }}</text>
                        </view>

                        <view
                            v-if="trendDetail.imgs && trendDetail.imgs.length"
                            class="imgs d-flex d-r"
                        >
                            <image
                                v-for="(img, imgIndex) in trendDetail.imgs"
                                :id="`img-${imgIndex}`"
                                @tap.stop="
                                    previewImage(
                                        `img`,
                                        imgIndex,
                                        imageConvertArray(trendDetail.picture)
                                    )
                                "
                                class="img"
                                :class=[getImgClass(trendDetail.imgs)]
                                :src="img"
                                mode="aspectFill"
                            />
                        </view>

                        <view class="desp">
                            <text class="text"
                                >{{ fromNow(trendDetail.createTime)
                                }}<text v-if="trendDetail.location">·</text
                                >{{ trendDetail.location }}</text
                            >
                        </view>

                        <view class="controls d-flex a-center j-between">
                            <view class="d-flex a-center">
                                <image
                                    v-if="!trendDetail.isLike"
                                    @tap.stop="ToggleLikeTrend(trendDetail)"
                                    class="icon"
                                    src="/static/image/aixin1.png"
                                    mode=""
                                />
                                <image
                                    v-if="trendDetail.isLike"
                                    @tap.stop="ToggleLikeTrend(trendDetail)"
                                    class="icon"
                                    src="/static/image/diet-collect-yes.png"
                                    mode=""
                                />
                                <text class="text">{{
                                    trendDetail.likeCount ? trendDetail.likeCount : "赞"
                                }}</text>
                                <image
                                    class="icon"
                                    style="margin-left: 20rpx"
                                    src="/static/image/lianxi1.png"
                                    mode=""
                                />
                                <text class="text">{{
                                    trendDetail.appraiseCount
                                        ? trendDetail.appraiseCount
                                        : "评论"
                                }}</text>
                            </view>

                            <view class="d-flex a-center">

                                <view class="status_box d-flex a-center">
                                    <i v-if="userData.id === trendDetail.userId" class="icon d-flex a-center j-center" :class="[getStatusIcon(trendDetail.status)]"></i>
                                    <view v-if="userData.id === trendDetail.userId&&trendDetail.isTop" class="isTop">置顶</view>
                                </view>
                                <view v-if="userData.id === trendDetail.userId" class="more d-flex a-center" @tap.stop="showControl()">
                                    <view class="dian"></view>
                                    <view class="dian"></view>
                                </view>
                                <view v-if="userData.id !== trendDetail.userId" class="more d-flex a-center" @tap.stop="showjubaopopup()">
                                    <view class="dian"></view>
                                    <view class="dian"></view>
                                </view>

                            </view>

                        </view>
                    </view>
                    <view class="comment_box">
                        <view class="title1 d-flex a-center">
                            <image
                                class="icon"
                                src="/static/image/lianxi1.png"
                                mode=""
                            />
                            <text style="margin-left: 10rpx">全部评论</text>
                        </view>

                        <view
                            class="comment level1"
                            v-for="comment in trendComments"
                            @tap.stop="setReviewTo(comment)"
                        >
                            <view class="active_box" :id="'i'+comment.id">
                                <view class="msg1 d-flex">
                                    <view class="left_msg d-flex" @tap.stop="goUserDetail(comment.userId)">
                                        <userhead
                                            width="80"
                                            height="80"
                                            :saveKey="comment.userId"
                                            :src="comment.userPhoto"
                                        />

                                        <sexdot
                                            class="sexdot"
                                            style="margin-left: 10rpx"
                                            :sex="comment.userSex"
                                            :age="comment.userAge"
                                        />
                                    </view>

                                    <view class="right_msg">
                                        <view
                                            class="row d-flex a-center j-between"
                                        >
                                            <view class="d-flex a-center">
                                                <text class="uname">
                                                    {{
                                                    comment.userName
                                                }}

                                                </text>
                                                <view class="louzhu d-flex a-center j-center" v-if="comment.userId === trendDetail.userId">楼主</view>
                                            </view>

                                            <view class="time_loc">
                                                <text>{{
                                                    fromNow(comment.createTime)
                                                }}</text>
                                                <text>·</text>
                                                <text>{{
                                                    comment.location
                                                        ? comment.location
                                                        : "未知"
                                                }}</text>
                                            </view>
                                        </view>
                                        <view class="comment_text">
                                            <text>{{ comment.content }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="review_box">
                                <view
                                    v-if="
                                        comment.friendCircleReviewList &&
                                        comment.friendCircleReviewList.length
                                    "
                                    class="comment"
                                    v-for="review in comment.friendCircleReviewList"
                                    :id="'i'+review.id"
                                    @tap.stop="setReviewTo(review)"
                                >
                                    <view class="active_box">
                                        <view class="msg1 d-flex">
                                            <view class="left_msg small d-flex" @tap.stop="goUserDetail(review.userId)">
                                                <userhead
                                                    width="60"
                                                    height="60"
                                                    :saveKey="review.userId"
                                                    :src="review.userPhoto"
                                                />

                                                <sexdot
                                                    class="sexdot"
                                                    style="margin-left: 10rpx"
                                                    :sex="review.userSex"
                                                    :age="review.userAge"
                                                />
                                            </view>

                                            <view class="right_msg">
                                                <view
                                                    class="row d-flex a-center j-between"
                                                >   
                                                    <view class="d-flex a-center">
                                                        <text class="uname">
                                                            {{
                                                            review.userName
                                                        }}

                                                        </text>
                                                        <view class="louzhu d-flex a-center j-center" v-if="review.userId === trendDetail.userId">楼主</view>
                                                    </view>

                                                    <view class="time_loc">
                                                        <text>{{
                                                            fromNow(
                                                                review.createTime
                                                            )
                                                        }}</text>
                                                        <text>·</text>
                                                        <text>{{
                                                            review.location
                                                                ? review.location
                                                                : "未知"
                                                        }}</text>
                                                    </view>
                                                </view>
                                                <view class="comment_text">
                                                    <text
                                                        style="color: #333"
                                                        v-if="review.toUserName"
                                                        >回复</text
                                                    >
                                                    <text
                                                        class="review_user"
                                                        v-if="review.toUserName"
                                                        >{{
                                                            review.toUserName
                                                        }}：</text
                                                    >
                                                    <text>{{
                                                        review.content
                                                    }}</text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="nomore">没有更多评论了</view>

                <view class="heightBox"></view>
            </scroll-view>
        </view>
    </view>

    <uni-popup ref="popup" type="bottom" :safe-area="false" background-color="transparent">
        <view class="sys-confirm-content">
				<view class="confirm-content-title">删除评论?</view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view  @tap="DelComment" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="closePopup" class="content-button" style="color: #999999;">取消</view>
		    </view>

        <!-- <view class="popup-content">
            <view class="desp d-flex a-center">删除评论?</view>
            <view class="row d-flex a-center j-center error" @tap="DelComment"
                >删除</view
            >
            <view style="height: 20rpx; background: #f5f5f5"></view>
            <view class="row d-flex a-center j-center cancel" @tap="closePopup"
                >取消</view
            >
        </view> -->
    </uni-popup>



    <uni-popup ref="cpopup" type="bottom" :safe-area="false" background-color="transparent">
        <view class="popup_box">
            <view class="controls d-flex">
                <view class="control d-flex d-c a-center" @tap="toggleIsTop">
                    <i class="icon icon-zhiding1"></i>
                    <view class="text">
                        {{trendDetail.isTop?'取消置顶':'置顶'}}
                    </view>
                </view>
                <view class="control d-flex d-c a-center" @tap="goTrendConfig">
                    <i class="icon icon-zhanshifanwei"></i>
                    <view class="text">
                        修改展示范围
                    </view>
                </view>
                <view class="control d-flex d-c a-center" @tap="showDel">
                    <i class="icon icon-shanchu1"></i>
                    <view class="text">
                        删除
                    </view>
                </view>
            </view>
            <view style="height:20rpx;width:750rpx;background:#f5f5f5;"></view>
            <view class="bottom_button d-flex a-center j-center" @tap="cpopup.close()">
                <text class="text">取消</text>
            </view>
            <view class="heightBox"></view>
        </view>

        
    </uni-popup>

    <uni-popup
            ref="delPopup"
            type="bottom"
            :safe-area="false"
            background-color="transparent"
        >
            <view class="sys-confirm-content">
				<view class="confirm-content-title">确认删除该动态?</view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view  @tap="DelTrend" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="delPopup.close" class="content-button" style="color: #999999;">取消</view>
		    </view>
            <!-- <view class="popup-content">
                <view class="desp d-flex a-center"
                    >确认删除该动态?</view
                >
                <view
                    class="row d-flex a-center j-center error"
                    @tap="DelTrend"
                    >删除</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="row d-flex a-center j-center cancel"
                    @tap="delPopup.close"
                    >取消</view
                >
            </view> -->
        </uni-popup>

    <uni-popup
            ref="jubaopopup"
            type="bottom"
            :safe-area="false"
            background-color="transparent"
        >
            <view class="popup_box">
                <view class="controls d-flex d-r">
                    <!-- <view class="control d-flex d-c a-center" @tap="pinbi">
                        <i class="icon icon-pingbigaidongtai"></i>
                        <text class="text"> 屏蔽 </text>
                    </view> -->
                    <view class="control d-flex d-c a-center" @tap="gojubaodongtai">
                        <i class="icon icon-jubao"></i>
                        <text class="text"> 举报 </text>
                    </view>
                    <view class="control d-flex d-c a-center" @tap="lahei">
                        <i class="icon icon-laheizuozhe"></i>
                        <text class="text"> 拉黑作者 </text>
                    </view>
                </view>
                <view style="height:20rpx;width:750rpx;background:#f5f5f5;"></view>
                <view class="bottom_button d-flex a-center j-center" @tap="jubaopopup.close()">
                    <text class="text">取消</text>
                </view>
                <view class="heightBox"></view>
            </view>
        </uni-popup>

    <uni-popup
            ref="popup1"
            type="bottom"
            background-color="transparent"
            :safe-area="false"
        >   
            <view class="sys-confirm-content">
				<view class="confirm-content-title">
                    <text class="text">
                        {{actionText}}
                    </text>
                </view>
				<!-- <view class="confirm-content-tip">
					<text class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</text>
				</view> -->
				<view class="content-button d-flex a-center j-center button-confirm" style="color: #1DC691;" @tap="submitJubao">
                    <text class="text">确认</text>
                </view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
                <view class="content-button d-flex a-center j-center" style="color: #999999;" @tap="popup1.close()">
                    <text class="text">取消</text>
                </view>

                <view class="heightBox"></view>
		    </view>
        </uni-popup>



        <uni-popup
            ref="notice_popup"
            type="bottom"
            background-color="transparent"
            :safe-area="false"
        >   

            <view>
                
            </view>

        </uni-popup>

    <inputArea
        ref="input_area"
        :inputText="contentText"
        :inputVisible="true"
        @transHeightChange="transHeightChange"
        @blur="handleBlur"
        @updateText="updateText"
        @send="sendComment"
        :placeholder="placeholderText"
        :keyboardHeight="keyboardHeight"
    ></inputArea>

    <imagePreview ref="preview"></imagePreview>
</template>

<script setup lang="ts">
import { ref, reactive,computed,nextTick } from "vue";
import { onReady, onShow, onLoad, onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import {
    getGroupMember,
    getCircleDetail,
    getTrendDetail,
    getTrendComment,
    addTrendComent,
    delTrendComent,
    likeTrend,
    unlikeTrend,
} from "@/api/api";

import {
    addToBlacklist,
} from "@/hooks/imHooks";
import cacheimg from "@/components/cacheimg.vue";
import inputArea from "@/components/inputArea.vue";
import { imStore as imStore1 } from "@/store/imStore";
import userhead from "@/components/userhead.vue";
import sexdot from "@/components/sexdot.vue";
import sexage from "@/components/sexage.vue";
import { wait, showLoading, closeLoading, replaceSwear } from "@/utils/utils";
import { getUserTrends,updateTrend,delTrend,pinbilahei } from "@/api/api";
import imagePreview from "@/components/imagePreview_old.vue";
import { imageConvertArray, getHDImages } from "@/utils/format";
import { getPosition } from "@/hooks/getPosition";
import { position as positionStore } from "@/store/position";


const jubaopopup = ref(null);
const popup1 = ref(null);
const action = ref('');

const actionText = computed(()=>{
    if(action.value==='pinbi'){
        return '确认屏蔽该动态?'
    }
    if(action.value==='lahei'){
        return '确认拉黑该用户?'
    }
})

const gojubaodongtai = () => {
    popup1.value.close();
    uni.navigateTo({
        url: `/pages/complaint/complaint?trendId=${trendDetail.value.id}&target=userFriendCircle`,
    });
};

const submitJubao = async()=>{
    const {id,userId} = trendDetail.value;
    let params = {
        userId:userData.id,
    };
    if(action.value==='pinbi'){
        params.typeKey = 1;
        params.typeValue = id;
    }
    if(action.value==='lahei'){
        params.typeKey = 2;
        params.typeValue = userId;
    }

    const res = await pinbilahei(params);

    const {flag} = res;

    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "操作失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    if(action.value==='pinbi'){
        uni.showToast({
            icon: "none",
            title: "已屏蔽该动态",
            duration: 3000,
        });
    }

    if(action.value==='lahei'){
        await addToBlacklist([userId]);
        uni.showToast({
            icon: "none",
            title: "已拉黑用户",
            duration: 3000,
        });
    }

    popup1.value.close();

    goBack();
    


}

const showjubaopopup = () => {
    jubaopopup.value.open();
};

const pinbi = () => {
    action.value = 'pinbi';
    jubaopopup.value.close();
    popup1.value.open();
};
const lahei = () => {
    if(trendDetail.value.userId===userData.id){
        uni.showToast({
            icon: "none",
            title: "无法拉黑自己",
            duration: 1500,
        });
        return;
    }

    action.value = 'lahei';
    jubaopopup.value.close();
    popup1.value.open();
};


const imStore: any = imStore1();
const scroll = ref(null);
const fcmid = ref(null);
const trendDetail = ref({});
const trendComments = ref([]);
const contentText = ref("");
const keyboardHeight = ref(0);
const position = positionStore();
const currentScrollTop = ref(0);
const scrollTop = ref(0);

const shadowVisible = ref(false);
const upHeight = ref(0);
const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();

let scrollHeight = null;

const cpopup = ref(null);

const showControl = ()=>{
    cpopup.value.open();
}

const calcTimeForShow=computed(()=>(item:any)=>{
    const {eventTime,isOnline,createTime} = item;
    const currentTime = new Date().getTime();
    let showUserTime = false;
    let subTime = currentTime - eventTime;
    if(subTime < 172800000){
        showUserTime = true;
    }

    if(showUserTime){
        if( subTime < 1200000 ){
            return '刚刚在线'
        }
        if( subTime < 3600000 ){
            return '最近在线'
        }

        if( 3600000 <= subTime < 86400000 ){
            return '今天在线'
        }

        if( 86400000 <= subTime < 172800000 ){
            return '昨天在线'
        }
    }else{
        return fromNow(createTime)
    }
})

const toggleIsTop=async ()=>{
    cpopup.value.close();
    const res = await updateTrend({id:trendDetail.value.id,isTop:trendDetail.value.isTop?0:1});
    const {flag} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "操作失败,请重试",
            duration: 1500,
        });
        return;
    }

    uni.showToast({
        icon: "sucess",
        title: trendDetail.value.isTop?'已取消置顶':'已置顶',
        duration: 1500,
    });

    trendDetail.value.isTop = trendDetail.value.isTop?0:1;
}

const statusEditChange = (obj:any) => {
    const {id,status} = obj;
    trends.value.forEach(trend=>{
        if(trend.id===id){
            trend.status = status;
        }
    })

    if(trendDetail.value.id===id){
        trendDetail.status = status;
    }
}

const goTrendConfig = () => {
    const { id,status } =  trendDetail.value;
    cpopup.value.close();
    uni.navigateTo({
        url: `/pages/trends/trendConfig?type=edit&status=${status}&id=${id}`,
    });
};

const getStatusIcon=computed(()=>(num:any)=>{

    if(num===1){
        return 'icon-gongkai'
    }
    if(num===2){
        return 'icon-jinhaoyou'
    }
    if(num===3){
        return 'icon-quanzi'
    }
    if(num===4){
        return 'icon-jinzijikejian'
    }


})

const delPopup = ref(null)

const showDel = ()=>{
    cpopup.value.close();
    setTimeout(()=>{
        delPopup.value.open();
    },300)
}

const DelTrend=async ()=>{
    delPopup.value.close();
    const res = await delTrend({id:trendDetail.value.id});
    const {flag} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "操作失败,请重试",
            duration: 1500,
        });
        return;
    }
    uni.showToast({
        icon: "sucess",
        title: '已删除',
        duration: 1500,
    });
    setTimeout(()=>{
        goBack();
    },1500)
}



const onScroll = (e:any)=>{
    scrollHeight = e.detail.scrollHeight;
    currentScrollTop.value = e.detail.scrollTop;
}





// 1评论  2回复
const commentMode = ref(1);

const placeholderText = computed(()=>{
    return commentMode.value ===1?'发表评论':`回复 ${reviewTo.value.userName}`
})


let commentTextCache = '';
let reviewTextCache = {};

const transFormHeight = ref(0);

const handleScrollBottom = () => {
    scrollTop.value = 99999;
};

const onKeyboardHeightChange = (obj: any) => {
    const { height } = obj;
    keyboardHeight.value = height;
};

const updateText = (text: string) => {
    if(commentMode.value===1){
        commentTextCache = text;
    }
    contentText.value = text;
};

let contentHeight = 0;

const transHeightChange = (num: number) => {

    // console.log('transHeightChange')
    // console.log(num)
    
    if(num!==0){
        if(commentMode.value===1){
            contentText.value = commentTextCache;
        }
    }

    if(num){
        shadowVisible.value = true;
    }


    let lessHeight = 0;

    let listMaxHeight =
        systemInfo.windowHeight -
        systemInfo.statusBarHeight -
        systemInfo.safeAreaInsets?.bottom -
        uni.upx2px(230);

    if (contentHeight < listMaxHeight) {
        const airHeight = listMaxHeight - contentHeight;

        if (airHeight > num) {
            transFormHeight.value = 0;
            return;
        } else {
            transFormHeight.value = num - airHeight;
            return;
        }
    }

    transFormHeight.value = num - lessHeight;
};

const input_area = ref(null);

const close = () => {

    scrollTop.value = currentScrollTop.value + 0.001;
    upHeight.value = 0;
    setTimeout(()=>{
        shadowVisible.value = false;
    },300)

     if(commentMode.value===2){
            reviewTextCache[reviewTo.value.id] = contentText.value;
        }else{
            commentTextCache = contentText.value;
        }

        commentMode.value = 1;
        nextTick(()=>{
            contentText.value = '';
        })

    input_area.value.close();
};

const checkHeight = () => {

}

const setReviewTo = (comment) => {

        


    

    if (comment.userId === userData.id) {
        reviewTo.value = comment;
        close();
        showDelPopup();
        return;
    }

    if (transFormHeight.value) {
        close();
        return;
    }





    uni.createSelectorQuery()
            .select(`#i${comment.id}`)
            .boundingClientRect((res) => {
                setTimeout(()=>{
                    const less = systemInfo.windowHeight  - uni.upx2px(120)- keyboardHeight.value  -res.height;
                    let top = res.top - less;

                    const listMaxHeight = systemInfo.windowHeight - uni.upx2px(170)

                    if(scrollHeight){
                        if(currentScrollTop.value + top + listMaxHeight > scrollHeight){
                            upHeight.value = currentScrollTop.value + top + listMaxHeight - scrollHeight - uni.upx2px(80) ;
                        }
                    }else{


                        let bottom = systemInfo.windowHeight - res.top - res.height;


                        upHeight.value = (keyboardHeight.value+uni.upx2px(120)) - bottom;
                    }


                    scrollTop.value = currentScrollTop.value+top;
                },300)
                




            })
            .exec();

    commentMode.value = 2;
    reviewTo.value = comment;
    contentText.value = reviewTextCache[reviewTo.value.id]
    input_area.value.getFocus();
};

const ToggleLikeTrend = async () => {
    const item = trendDetail.value;


    

    const { id, isLike } = item;

    const params = { fcmid: id, userId: userData.id };
    let res = null;
    if (isLike) {
        res = await unlikeTrend(params);
    } else {
        res = await likeTrend(params);
    }
    const { flag } = res;
    if (flag === 1) {
        if (isLike) {
            item.likeCount -= 1;
        } else {
            item.likeCount += 1;
        }
        item.isLike = !!!isLike;
    }

    uni.$emit('trendIsLikeChange',item)

    
};

const showDelPopup = () => {
    popup.value.open();
};

const fromNow = (time) => {
    if (!time) {
        return "--";
    }
    return uni.$tm.u.getDateToNewData(time);
};

const goUserDetail = (userId: any) => {
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${userId}`,
    });
};

const trends = ref([]);
const reviewTo = ref({});

const pageParam = reactive({
    page: 1,
    rows: 10,
    total: 0,
});

const goBack = () => {
    uni.navigateBack();
};

const GetUserTrends = async () => {
    if (pageParam.total && trends.value.length >= pageParam.total) {
        return;
    }

    const { page, rows } = pageParam;
    const params = {
        userId: userData.id,
        page,
        rows,
    };

    const res = await getUserTrends(params);
    const { flag, data } = res;

    pageParam.total = data.total;

    data.list.forEach((item) => {
        item.imgs = item.picture.split(",").filter((img) => img);
    });

    if (page === 1) {
        trends.value = data.list;
    } else {
        trends.value.push(...data.list);
    }
};

const GetTrendComment = async () => {
    const params = { fcmid: fcmid.value, rows: 1000 };
    const res = await getTrendComment(params);
    console.log("getTrendComment");
    console.log(res);
    trendComments.value = res.data.list;

    nextTick(() => {
        getContentHeight();
    });
};

const GetTrendDetail = async () => {
    const params = { fcmid: fcmid.value };
    const res = await getTrendDetail(params);
    console.log("getTrendDetail");
    console.log(res);
    res.data.imgs = res.data.picture.split(",").filter((img) => img);
    trendDetail.value = res.data;
    nextTick(() => {
        getContentHeight();
    });
};

let sendCommentLoading = false;

const sendComment = async (content: string) => {
    if (!content) {
        return; //
    }

    if (sendCommentLoading) {
        return;
    }

    sendCommentLoading = true;
    showLoading();

    const { latitude, longitude } = position;


    let toUserId = null;
    let parentId = 0

    if(commentMode.value === 2){
        toUserId = reviewTo.value.parentId === "0" ? null : reviewTo.value.userId;
        parentId = reviewTo.value.parentId === "0" ? reviewTo.value.id : reviewTo.value.parentId || 0;
    }

    let needScroolBottom = commentMode.value === 1;



    const params = {
        fcmid: fcmid.value,
        toUserId,
        userId: userData.id,
        parentId,
        content: replaceSwear(content),
        latitude,
        longitude,
    };

    const res = await addTrendComent(params);
    const { flag } = res;
    sendCommentLoading = false;
    closeLoading();

    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "发表评论失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    uni.showToast({
        icon: "success",
        title: "评论成功",
        duration: 1500,
    });

    
    contentText.value = "";
    reviewTo.value = {};
    commentTextCache = '';
    reviewTextCache = {};
    commentMode.value = 1;


    await refresh();
    if(needScroolBottom){
        nextTick(() => {
            scrollTop.value = currentScrollTop.value + 0.001;
            setTimeout(() => {
                handleScrollBottom();
            }, 300);
        });

    }
};

const popup = ref(null);

const closePopup = () => {
    reviewTo.value = {};
    popup.value.close();
};

const DelComment = async () => {
    const params = {
        id: reviewTo.value.id,
    };
    closePopup();
    const res = await delTrendComent(params);
    reviewTo.value = {};
    const { flag } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "删除评论失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    uni.showToast({
        icon: "success",
        title: "删除成功",
        duration: 1500,
    });

    refresh();
};

const handleBlur = () => {
    // if(!contentText.value){
    //     reviewTo.value = {};
    //     placeholderText.value = "发表评论";
    // }
};

const getContentHeight = () => {
    uni.createSelectorQuery()
        .select("#heightDom")
        .boundingClientRect((res) => {
            console.log("contentHeight");
            console.log(res.height);
            contentHeight = res.height;
        })
        .exec();
};

const refresh = async () => {
    await Promise.all([GetTrendDetail(), GetTrendComment()]);
    if(!scrollHeight){
        scrollTop.value = 1;
    }
    // setTimeout(() => {
    //     scroll.value.success();
    // }, 500);
};

const scrolltolower = async () => {
    pageParam.page += 1;
    await GetUserTrends().catch(() => {});
};

const goRelease = () => {
    uni.navigateTo({
        url: `/pages/trends/releaseTrends`,
    });
};

const preview = ref();
const previewImage = (id: string, index: number, urls: any) => {
    uni.createSelectorQuery()
        .select(`#${id}-${index}`)
        .boundingClientRect()
        .exec((ret) => {
            let params = {
                idPre:'img-',
                startInfo: [ret[0]], //图片的初始大小与位置
                index: index, //当前id
                urls: getHDImages(urls), //预览集合图片地址
            };
            preview.value.open(params);
        });
};

let int = null;

const getImgClass=computed(()=>(arr:array)=>{
    if(arr.length === 1){
        return 'L1'
    }
    if(arr.length === 2||arr.length ===4){
        return 'L2'
    }

    return 'L3'

})

onReady(() => {});

onLoad((option: any) => {
    if (option.fcmid) {
        fcmid.value = option.fcmid;
    }
    /* #ifndef H5 */
    uni.onKeyboardHeightChange(onKeyboardHeightChange);
    /*#endif*/
    getPosition(true,'评论需要使用位置信息');
    //int = setInterval(refresh,5000);
    uni.$on('statusEditChange',statusEditChange);
});
onUnload((option: any) => {
    /* #ifndef H5 */
    uni.offKeyboardHeightChange(onKeyboardHeightChange);
    uni.$off('statusEditChange',statusEditChange);
    /*#endif*/
    //clearInterval(int);
    int = null;
});

onShow(() => {
    refresh();
});
</script>

<style lang="scss" scoped>
.right_box_text {
    &:active {
        opacity: 0.7;
    }
}


.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}

.nomore{
    width:750rpx;
    font-size:26rpx;
    color:#999;
    text-align: center;
    height:70rpx;
    line-height:50rpx;
}

.popup_box{
    width:750rpx;
    border-top-left-radius:20rpx;
    border-top-right-radius:20rpx;
    background:#fff;
    overflow:hidden;
    .icon{
        font-size:60rpx;
        color:#666;
    }
    .controls {
        margin-top: 55rpx;
        margin-bottom:50rpx;
        .control {
            width:180rpx;
        }
        .text {
            font-size: 28rpx;
            color: #333;
            margin-top: 40rpx;
            text-align: center;
            &.text1{
                margin-top:0;
            }
        }

        
    }
    .bottom_button {
        width:750rpx;
        height:100rpx;
        background:#fff;
        .text {
            color: #333;
            font-size:32rpx;
        }
    }

    .heightBox {
        min-height:20rpx;
        height: constant(safe-area-inset-bottom);
        height: env(safe-area-inset-bottom);
    }
}

.win_shadow {
    width: 750rpx;
    position: fixed;
    z-index: 50;
    height: 100vh;
    //background:#000;
    opacity: 0.5;
}

.trendDetail {
    width: 750rpx;
    height: 100vh;
    background: #f5f5f5;
    transition: all ease 0.3s;
    overflow:hidden;

    .user_msg {
        font-weight: 400;
        .u_name2 {
            font-size: 30rpx;
            font-weight:400;
            font-family: PingFangSC-Medium, PingFang SC;
            color: #666;
        }
         .desp {
                    margin-top: 10rpx;
                    .text {
                        font-size: 24rpx;
                        color: #999;
                    }

                    .online{
                        font-size:24rpx;
                        font-weight:400;
                        color:#1DC691;
                    }
                }
    }

    .content1 {
        position: absolute;
        width: 750rpx;
        left: 0;
        right: 0;
        background: #f5f5f5;
        bottom: 0;
        display:flex;
        .scrollView{
            width:750rpx;
            flex:1;
        }
        .card {
            width: 710rpx;
            margin: 0 auto;
            padding: 20rpx 35rpx;
            background: #fff;
            border-radius: 20rpx;
            margin-bottom: 20rpx;
            .msg {
                margin-left: 20rpx;
            }
            .u_name {
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #333333;
                margin-bottom: 10rpx;
            }

            .trend {
                margin-top: 13rpx;
                .title {
                    .text {
                        font-size: 30rpx;
                        color: #333;
                        line-height: 42rpx;
                    }
                }
                .imgs {
                    width: 680rpx;
                    margin-top: 15rpx;
                    flex-wrap: wrap;
                    gap: 20rpx;
                    .img {
                        width: 200rpx;
                        height: 200rpx;
                        border-radius: 20rpx;
                    }
                    .L1{
                            width:350rpx;
                            height:350rpx;
                        }
                    .L2{
                            width:250rpx;
                            height:250rpx;
                        }
                    .L3{
                            width: 200rpx;
                            height: 200rpx;
                        }
                }

                .desp {
                    margin-top: 10rpx;
                    .text {
                        font-size: 24rpx;
                        color: #999;
                    }
                }

                .controls {
                    margin-top: 15rpx;
                    .icon {
                        width: 40rpx;
                        height: 40rpx;
                    }
                    .text {
                        font-size: 28rpx;
                        color: #999;
                        margin-left: 10rpx;
                    }

                    .status_box{
                        margin-right:10rpx;
                        color:#ccc;
                        .icon{
                            width:30rpx;
                            height:30rpx;
                            font-size:30rpx;
                            position: relative;
                        }
                    }

                    .more{
                        width: 60rpx;
                        height: 40rpx;
                        background: rgba(0,0,0,0.06);
                        border-radius: 6rpx;
                        justify-content: center;
                        gap:10rpx;
                        .dian{
                            width: 8rpx;
                            height: 8rpx;
                            background: #999;
                            border-radius: 4rpx;
                        }
                    }
                }
            }
        }
        .comment_box {
            border-top: 1px solid #f5f5f5;
            margin-top: 15rpx;
            .title1 {
                color: #999;
                font-size: 28rpx;
                padding: 0;
                height: 60rpx;
                .icon {
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            .comment {
                margin-bottom: 25rpx;
                &.level1 {
                    margin-bottom: 30rpx;
                    border-bottom: 1px solid #f5f5f5;
                    &:last-child{
                        border-bottom: none;
                    }
                }
                // &:active {
                //     background: #f5f5f5;
                // }
                .active_box:active {
                    background: #f5f5f5;
                }
                .msg1 {
                    width: 100%;
                    .left_msg {
                        position: relative;
                        padding-right: 20rpx;
                        &.small {
                            .sexdot {
                                position: absolute;
                                top: 38rpx;
                                left: 30rpx;
                            }
                        }
                        .sexdot {
                            position: absolute;
                            top: 58rpx;
                            left: 45rpx;
                        }
                        .uname {
                            font-size: 24rpx;
                            color: #999;
                            margin-left: 25rpx;
                        }
                    }
                    .right_msg {
                        font-size: 24rpx;
                        flex: 1;
                        color: #999;
                        .time_loc {
                            font-size: 22rpx;
                        }
                        .louzhu{
                            width:60rpx;
                            height:30rpx;
                            background: #D3F9ED;
                            border-radius: 10rpx;
                            font-size:20rpx;
                            color:#1DC691;
                            margin-left:10rpx;
                        }
                    }
                }
                .comment_text {
                    font-size: 28rpx;
                    color: #333;
                    line-height: 40rpx;
                    margin-top: 5rpx;
                    .review_user {
                        //color: #639686;
                        color: #333;
                        margin-left: 5rpx;
                    }
                }

                .review_box {
                    margin-top: 20rpx;
                    .active_box {
                        padding-left: 65rpx;
                    }
                }
            }
        }
        .heightBox {
            height: calc(env(safe-area-inset-bottom) + 100rpx);
        }
        .nodata {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;

            .img {
                width: 560rpx;
                height: 560rpx;
            }
            .desp {
                margin-top: 20rpx;
                width: 560rpx;
                .text {
                    font-size: 28rpx;
                    color: #999;
                }
            }
        }
    }
}
</style>
